<section id="portfolio">

    <div class="section-title text-center wow fadeInDown">
        <h2>Services</h2>
        <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt.</p>
    </div>

    <nav class="project-filter clearfix text-center wow fadeInLeft"  data-wow-delay="0.5s">
        <ul class="list-inline">
            <li><a href="javascript:;" class="filter" data-filter="all">All</a></li>
            <li><a href="javascript:;" class="filter" data-filter=".app">App</a></li>
            <li><a href="javascript:;" class="filter" data-filter=".photography">Photography</a></li>
            <li><a href="javascript:;" class="filter" data-filter=".web">Web</a></li>
            <li><a href="javascript:;" class="filter" data-filter=".print">Print</a></li>
        </ul>
    </nav>

    <div id="projects" class="clearfix">

        <figure class="mix portfolio-item app">
            <img class="img-responsive" src=" /static/img/portfolio/portfolio-1.jpg " alt="Portfolio Item">
            <a href=" /static/img/portfolio/portfolio-1.jpg' " title="Title One" rel="portfolio" class="fancybox"><span class="plus"></span></a>
            <figcaption class="mask">
                <h3>Awesome Image</h3>
                <span>Photography</span>
            </figcaption>
        </figure>

        <figure class="mix portfolio-item photography">
            <img class="img-responsive" src=" /static/img/portfolio/portfolio-2.jpg " alt="Portfolio Item">
            <a href=" /static/img/portfolio/portfolio-2.jpg " title="Title Two" rel="portfolio" class="fancybox"><span class="plus"></span></a>
            <figcaption class="mask">
                <h3>Awesome Image</h3>
                <span>Photography</span>
            </figcaption>
        </figure>

        <figure class="mix portfolio-item web">
            <img class="img-responsive" src=" /static/img/portfolio/portfolio-3.jpg " alt="Portfolio Item">
            <a href=" /static/img/portfolio/portfolio-3.jpg " title="Title Three" rel="portfolio" class="fancybox"><span class="plus"></span></a>
            <figcaption class="mask">
                <h3>Awesome Image</h3>
                <span>Photography</span>
            </figcaption>
        </figure>

        <figure class="mix portfolio-item print">
            <img class="img-responsive" src=" /static/img/portfolio/portfolio-4.jpg " alt="Portfolio Item">
            <a href=" /static/img/portfolio/portfolio-4.jpg " title="Title Four" rel="portfolio" class="fancybox"><span class="plus"></span></a>
            <figcaption class="mask">
                <h3>Awesome Image</h3>
                <span>Photography</span>
            </figcaption>
        </figure>

        <figure class="mix portfolio-item app">
            <img class="img-responsive" src=" /static/img/portfolio/portfolio-5.jpg " alt="Portfolio Item">
            <a href=" /static/img/portfolio/portfolio-5.jpg " title="Title Five" rel="portfolio" class="fancybox"><span class="plus"></span></a>
            <figcaption class="mask">
                <h3>Awesome Image</h3>
                <span>Photography</span>
            </figcaption>
        </figure>

        <figure class="mix portfolio-item photography">
            <img class="img-responsive" src=" /static/img/portfolio/portfolio-1.jpg " alt="Portfolio Item">
            <a href=" /static/img/portfolio/portfolio-1.jpg " title="Title Six" rel="portfolio" class="fancybox"><span class="plus"></span></a>
            <figcaption class="mask">
                <h3>Awesome Image</h3>
                <span>Photography</span>
            </figcaption>
        </figure>

        <figure class="mix portfolio-item web app">
            <img class="img-responsive" src=" /static/img/portfolio/portfolio-2.jpg " alt="Portfolio Item">
            <a href=" /static/img/portfolio/portfolio-2.jpg " title="Title Seven" rel="portfolio" class="fancybox"><span class="plus"></span></a>
            <figcaption class="mask">
                <h3>Awesome Image</h3>
                <span>Photography</span>
            </figcaption>
        </figure>

        <figure class="mix portfolio-item print web">
            <img class="img-responsive" src=" /static/img/portfolio/portfolio-3.jpg " alt="Portfolio Item">
            <a href=" /static/img/portfolio/portfolio-3.jpg " title="Title Eight" rel="portfolio" class="fancybox"><span class="plus"></span></a>
            <figcaption class="mask">
                <h3>Awesome Image</h3>
                <span>Photography</span>
            </figcaption>
        </figure>

    </div> <!-- end #projects -->

</section>